<template>
  <div>
    <el-form :model='formData' :rules="rules" ref="formDataRef" label-width="100px">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="头像" prop="avatar">
            <CoverUpload v-model="formData.avatar" @callback="saveAvatar"></CoverUpload>
          </el-form-item>
          <el-form-item label="昵称" prop="nickName">
            <el-input placeholder="请输入昵称" v-model="formData.nickName">
            </el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input placeholder="请输入昵称" v-model="formData.phone">
            </el-input>
          </el-form-item>
          <el-form-item label="密码">
            <a href="javascript:void(0)" class="a-link" @click="showUpdatePassword">修改密码</a>
          </el-form-item>
          <el-form-item label="默认编辑器" prop="editorType">
            <el-radio-group v-model="formData.editorType">
              <el-radio :value="0">富文本编辑器</el-radio>
              <el-radio :value="1">markDown编辑器</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="职业" prop="profession">
            <el-input placeholder="请输入职业" v-model="formData.profession"></el-input>
          </el-form-item>
          <el-form-item prop="phone">
            <el-button type="danger" @click="saveMy">保存</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="简介" prop="introduction">
            <EditorHtml v-model="formData.introduction"></EditorHtml>
          </el-form-item>

        </el-col>
      </el-row>
    </el-form>

    <Dialog width="400px" :show="dialogConfig.show" @close="dialogConfig.show = false" :title="dialogConfig.title"
      :buttons="dialogConfig.buttons">
      <el-form :model=passwordFormData :rules=rules ref="passwordFormDataRef" label-width="80px">
        <el-form-item label="密码" prop="password">
          <el-input type="password" placeholder="请输入密码" v-model="passwordFormData.password" size="large">
          </el-input>
        </el-form-item>
        <el-form-item label='重复密码' prop="rePassword">
          <el-input type="password" placeholder="请再次输入密码" v-model="passwordFormData.rePassword" size="large">
          </el-input>
        </el-form-item>
      </el-form>
    </Dialog>

  </div>
</template>

<script setup>
import { getCurrentInstance, ref, reactive, nextTick } from 'vue'
const { proxy } = getCurrentInstance();
const formData = ref({});

const validateRePass = (rule, value, callback) => {
  if (value !== passwordFormData.value.password) {
    callback(new Error(rule.message));
  } else {
    callback();
  }
};

const rules = {
  nickName: [
    {
      required: true,
      message: "昵称不能为空"
    }
  ],
  editorType: [
    {
      required: true,
      message: "请选择默认编辑器"
    }
  ],
  password: [
    {
      required: true,
      message: "请输入密码"
    },
    {
      validator: proxy.Verify.password,
      message: "密码最少8位，只能数字字母和特殊字符",
    },
  ],
  rePassword: [
    {
      required: true,
      message: "请再次输入密码"
    },
    {
      validator: validateRePass,
      message: "两次输入的密码不一致",
    },
  ],
  phone: [
    {
      required: true,
      message: "请输入手机号"
    },
    {
      validator: proxy.Verify.phone,
      trigger: "blur",
      message: "请输入正确的手机号"
    }
  ],
};

const api = {
  'getUserInfo': 'getUserInfo',
  'saveMyInfo': 'saveMyInfo',
  'updateMyPassword': 'updateMyPassword',
  'saveAvatar': 'saveAvatar'
}


const getUserInfo = async () => {
  let res = await proxy.Request({
    url: api.getUserInfo
  })

  if (!res) {
    return;
  }
  formData.value = res.data;
}
getUserInfo();

const formDataRef = ref(null)
const saveMy = () => {
  formDataRef.value.validate(async (valid) => {
    if (!valid) {
      return;
    }
    let res = await proxy.Request({
      url: api.saveMyInfo,
      params: {
        avatar: formData.value.avatar,
        nickName: formData.value.nickName,
        phone: formData.value.phone,
        editorType: formData.value.editorType,
        profession: formData.value.profession,
        introduction: formData.value.introduction,
      }
    })
    if (!res) {
      return;
    }
  });
  proxy.Message.success('保存成功')
}

// 修改密码

const passwordFormData = ref({});
const passwordFormDataRef = ref(null);

const dialogConfig = reactive({
  show: false,
  title: '修改密码',
  buttons: [{
    type: 'danger',
    text: '确定',
    click: (e) => {
      submitPass();
    }
  }]
})

const showUpdatePassword = () => {
  dialogConfig.show = true;
  nextTick(() => {
    passwordFormDataRef.value.resetFields();
    passwordFormData.value = {};
  })
}

// 修改头像
const saveAvatar = async (avatar) => {
  let res = await proxy.Request({
    url: api.saveAvatar,
    params: {
      avatar
    }
  })
  if (!res) {
    return;
  }
  proxy.Message.success('头像修改成功');

}

// 修改密码
const submitPass = () => {
  passwordFormDataRef.value.validate(async (valid) => {
    if (!valid) {
      return;
    }
    let res = await proxy.Request({
      url: api.updateMyPassword,
      params: {
        password: passwordFormData.value.password
      }
    });
    if (!res) {
      return;
    }
    dialogConfig.show = false;
    proxy.Message.success('修改密码成功');
  })
}


</script>

<style lang='scss'></style>